<route lang="json5" type="entryTemplate">
{
  layout: 'none',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'default',
    navigationBarTitleText: '进件模板',
    navigationBarBackgroundColor: '#3287e1',
    navigationBarTextStyle:'white',
    enablePullDownRefresh:false,
    onReachBottomDistance:50,
  },
}
</route>

<script setup lang="ts">
import type { LoadMoreState } from 'wot-design-uni/components/wd-loadmore/types'
import { ref } from 'vue'
import { getTplList } from '@/api/finance'

const list = ref([
  { tpl_id: 0, tpl_name: '模板0' },
  { tpl_id: 1, tpl_name: '模板1' },
  { tpl_id: 2, tpl_name: '模板2' },
  { tpl_id: 3, tpl_name: '模板3' },
  { tpl_id: 4, tpl_name: '模板4' },
  { tpl_id: 5, tpl_name: '模板5' },
  { tpl_id: 6, tpl_name: '模板6' },
  { tpl_id: 7, tpl_name: '模板7' },
  { tpl_id: 8, tpl_name: '模板8' },
  { tpl_id: 9, tpl_name: '模板9' },
  { tpl_id: 10, tpl_name: '模板10' },
  { tpl_id: 0, tpl_name: '模板0' },
  { tpl_id: 1, tpl_name: '模板1' },
  { tpl_id: 2, tpl_name: '模板2' },
  { tpl_id: 3, tpl_name: '模板3' },
  { tpl_id: 4, tpl_name: '模板4' },
  { tpl_id: 5, tpl_name: '模板5' },
  { tpl_id: 6, tpl_name: '模板6' },
  { tpl_id: 7, tpl_name: '模板7' },
  { tpl_id: 8, tpl_name: '模板8' },
  { tpl_id: 9, tpl_name: '模板9' },
  { tpl_id: 10, tpl_name: '模板10' },
]) // 列表数据
const page = ref(1)
const total = ref(50) // 总条数
const loadState = ref<LoadMoreState>('loading')
function loadMore() {
  if (loadState.value === 'finished') {
    console.log('加载完成')
    return
  }
  setTimeout(() => {
    // 模拟请求数据
    if (list.value.length >= total.value) {
      console.log('没有更多数据了')
      loadState.value = 'finished'
    }
    else {
      // 每次加载20条
      for (let i = 0; i < 20; i++) {
        list.value.push({
          tpl_id: i,
          tpl_name: `模板${i}`,
        })
      }
    }
  }, 1000)
}
onLoad(() => {
  loadMore()
})
onReachBottom(() => {
  if (loadState.value === 'finished') {
    return
  }
  loadMore()
})
function handleClick() {
  uni.navigateTo({
    url: '/pages-sub/finance/entryTemplate',
  })
}
</script>

<template>
  <view class="bottom-btn-pd">
    <wd-status-tip v-if="list.length === 0 && loadState !== 'loading'" image="content" tip="暂无内容" />
    <view>
      <template v-if="list.length > 0">
        <wd-cell v-for="item in list" :key="item.tpl_id" :title="item.tpl_name" is-link :to="`/pages-sub/finance/entryTemplate?id=${item.tpl_id}`" />
        <wd-loadmore custom-class="loadmore" :state="loadState" @reload="loadMore()" />
      </template>
      <view v-else>
        <wd-status-tip image="content" tip="暂无内容" />
      </view>
    </view>
    <safe-bottom>
      <wd-button type="primary" size="small" block @click="handleClick">
        添加模版
      </wd-button>
    </safe-bottom>
  </view>
</template>

<style lang="scss" scoped>
  .scroll-view {
    height: calc(100vh - 210rpx - env(safe-area-inset-bottom));

  }
</style>
